<template>
  <Card title="今日订单" value="888,888,8">
    <div ref="lineChartRef" style="width: 100%; height: 100%"></div>

    <template #footer>
      <div>昨日订单量<span class="emphasis">￥269,000,00</span></div>
    </template>
  </Card>
</template>

<script lang="ts">
import Card from "./Card.vue";
import axios from "axios";
export default {
  name: "TodayOrder",
  components: {
    Card,
  },
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
import { ref, onMounted } from "vue";
//定义页面中的标签对象
const lineChartRef = ref();
let lineChart: EChartsType;
//准备配置项 根据配置内容生成图形结构
const getOption = () => {
  return {
    //位置
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    xAxis: {
      boundaryGap: false, //x轴两侧不留白
      // show:false, 是否显示水平值
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ], // x轴数据列表
    },
    yAxis:{
        show:false,//垂直线
    },

    series:[{
        name: '实时订单数',
        type: 'line',
        // data: orderTrend.value,
        data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        // 将折线设置成平滑的曲线
        smooth: true,
        // 设置折线拐点的样式
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: 'purple'
        },
        lineStyle: {
          opacity: 0
        }
    }],
    //显示提示
    tooltip:{
        trigger:'axis',
        confine:true
    }
  };
};
onMounted(()=>{
    //折线图
    lineChart = echarts.init(lineChartRef.value);
    lineChart.setOption(getOption());
})
</script>
<style scoped>

</style>
